<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="30">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query">
                        <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="toAddPage">添加商品</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="goodsList"
                    border
                    stripe
                    :header-cell-style="{textAlign: 'center'}"
                    :cell-style="{ textAlign: 'center' }"

            >
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label="商品名称" prop="goods_name" width="500"></el-table-column>
                <el-table-column label="商品价格(元)" prop="goods_price"></el-table-column>
                <el-table-column label="商品重量" prop="goods_weight"></el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.add_time | datetimeFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="toEditPage(scope.row.goods_id)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                       @click="removeGoodsById(scope.row.goods_id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 3, 4,5]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "Good",
    data() {
      return {
        queryInfo: {
          query: '',
          pageSize: 5,
          pageNum: 1
        },
        goodsList: [],
        total: 0,
        editForm:{},
        editFormRules:{

        }
      }
    },
    created() {
      this.getGoodsList();
    },
    methods: {
      async getGoodsList() {
        const {data: res} = await this.$http({
          url: 'goods',
          method: 'get',
          params: this.queryInfo
        });
        if (res.meta.status === 403) return this.$message.error(res.meta.msg);
        if (res.meta.status !== 200) return this.$message.error('获取商品列表失败');
        this.goodsList = res.data.goods;
        this.total = res.data.total;
      },
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize;
        this.getGoodsList();
      },
      handleCurrentChange(newPage) {
        this.queryInfo.pageNum = newPage;
        this.getGoodsList();
      },
      async removeGoodsById(id) {
        const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err);
        if (confirmResult === 'confirm') {
          const {data: res} = await this.$http({
            url: 'goods/' + id,
            method: 'delete'
          });
          if (res.meta.status === 403) return this.$message.error(res.meta.msg);
          if (res.meta.status !== 200) return this.$message.error('删除失败');
          this.getGoodsList();
          return this.$message.success('删除成功');
        }
        this.$message.info('已取消删除');
      },
      toAddPage(){
        this.$router.push('/goods/add');
      },
      toEditPage(id){
        window.sessionStorage.setItem('id',id);
        this.$router.push('/goods/edit');
      }

    }

  }
</script>

<style scoped>
    .el-breadcrumb {
        margin-bottom: 20px;
    }

    .el-table {
        margin: 15px 0;
    }
</style>